<style scoped>

</style>
<template> 
    <div class="PO-tracking-page">
        <el-form :inline="true" :model="POForm" class="demo-form-inline" style="border-bottom:1px solid #ccc;">
            <el-form-item label="采购订单编号" class="selectMB10">
                <el-input size="mini" v-model="POForm.prOrderCode" placeholder="请输入采购订单编号"></el-input>
            </el-form-item>
            <el-form-item label="制单日期" class="selectMB10">
                <el-date-picker type="date" size="mini" :editable="false" v-model="POForm.expectTimeStart" @change="selectedExpectTimeStart" placeholder="请选择"></el-date-picker>
                &nbsp;至&nbsp;
                <el-date-picker type="date" size="mini" :editable="false" v-model="POForm.expectTimeEnd" @change="selectedExpectTimeEnd" placeholder="请选择"></el-date-picker>
            </el-form-item>
            <el-form-item label="订单状态" class="selectMB10">
                <el-select size="mini" clearable v-model="POForm.poStatusQueryName" placeholder="请选择">
                    <el-option v-for="(poStatusQueryName,index) in poStatusQueryNames" :key="index" :label="poStatusQueryName.label" :value="poStatusQueryName.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="集成状态" class="selectMB10">
                <el-select size="mini" clearable v-model="POForm.poStatusQueryResultName" placeholder="请选择">
                    <el-option v-for="(poStatusQueryResultName,index) in poStatusQueryResultNames" :key="index" :label="poStatusQueryResultName.label" :value="poStatusQueryResultName.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="供应商编码" class="selectMB10">
                <el-input size="mini" v-model="POForm.partnerCode" placeholder="请输入供应商编码"></el-input>
            </el-form-item>
            <el-form-item label="供应商名称" class="selectMB10">
                <el-input size="mini" v-model="POForm.partnerName" placeholder="请输入供应商名称"></el-input>
            </el-form-item>
            <el-form-item class="selectMB10">
                <el-button class="bolder outsideBtnBS selectAll" :disabled="selectDisabled" size="mini" type="danger" @click="queryPO">查询</el-button>
            </el-form-item>
        </el-form>
        <!--表格-->
        <label class="default-label">PO列表：</label>
        <el-table :data="POListsData" border style="width: 100%;" v-loading.body="loading" element-loading-text="拼命加载中">
            <el-table-column  type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
            <el-table-column  label="操作" header-align="center" align="center" width="60" v-if="powerFlag">
                <template scope="scope">
                    <div class="operationItem bolder" @click="handleFinished(scope.$index,scope.row)">完成</div>
                </template>
            </el-table-column>
            <el-table-column prop="prOrderCode" label="PO编号" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="sapno" label="SAP编号" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="partnerName" label="供应商名称" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="currencyName" label="币别" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="totalMoney" label="金额" header-align="center" align="right"></el-table-column>
            <el-table-column prop="statusVo.label" label="状态" header-align="center" align="center" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="amount" label="采购总数量" header-align="center" align="center"></el-table-column>
            <!--<el-table-column prop="amount" label="采购总数量" header-align="center">
                <template scope="scope">
                    <el-button size="mini" @click="executiveDetails(scope.$index, scope.row)"  class="blueFont">
                        {{scope.row.amount}}
                    </el-button>
                </template>
            </el-table-column>-->
            <el-table-column prop="sendCount" label="已送货数量" header-align="center" align="center">
                <template scope="scope">
                    <el-button size="mini" @click="executiveDetails(scope.$index, scope.row)"  class="blueFont">
                        {{scope.row.sendCount}}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="notSendCount" label="未送货数量" header-align="center" align="center"></el-table-column>
           <!-- <el-table-column prop="receivedCount" label="已收货数量" header-align="center">
                <template scope="scope">
                    <el-button size="mini" @click="executiveDetails(scope.$index, scope.row)"  class="blueFont">
                        {{scope.row.receivedCount}}
                    </el-button>
                </template>
            </el-table-column>-->
            <el-table-column prop="receivedCount" label="已收货数量" header-align="center" align="center"></el-table-column>
            <el-table-column prop="notReceivedCount" label="未收货数量" header-align="center" align="center"></el-table-column>
            <!--<el-table-column prop="storageCount" label="已入库数量" header-align="center">
                <template scope="scope">
                    <el-button size="mini" @click="executiveDetails(scope.$index, scope.row)"  class="blueFont">
                        {{scope.row.storageCount}}
                    </el-button>
                </template>
            </el-table-column>-->
            <el-table-column prop="storageCount" label="已入库数量" header-align="center" align="center"></el-table-column>
            <el-table-column prop="notStorageCount" label="未入库数量" header-align="center" align="center"></el-table-column>
            <!--<el-table-column prop="unqualifiedCount" label="采购不良" header-align="center">
                <template scope="scope">
                    <el-button size="mini" @click="executiveDetails(scope.$index, scope.row)"  class="blueFont">
                        {{scope.row.unqualifiedCount}}
                    </el-button>
                </template>
            </el-table-column>-->
            <el-table-column prop="unqualifiedCount" label="采购不良" header-align="center" align="center"></el-table-column>
            <el-table-column prop="creatorName" label="制单人" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createTime" label="制单日期" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="reviewer" label="审核人" header-align="center" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="reviewTime" label="审核日期" header-align="center" align="center" show-overflow-tooltip></el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination v-if="isPaging" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="pageIndex"
                       :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                       :page-count="totalPage" :total="totalNumber">
        </el-pagination>
        <!-- 完成弹窗 -->
        <el-dialog id="approvalMask" title="订单完成" :visible.sync="handleFinishedVisible" size="mini" :lock-scroll="false">
            <h2>提示：</h2>
            <p>PO完成后:</p>
            <p>1、将不允许供应商对本订单继续进行发货的操作；</p>
            <p>2、与供应商结算数据，以实际入库数量为准；</p>
            <p>3、未发货的计划，允许再次下PO；</p>
            <h2 style="margin-top:10px;">是否进行“完成”操作？</h2>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="confirmCompletion()">确定</el-button>
                <el-button size="mini" @click="handleFinishedVisible=false">取消</el-button>
            </div>
        </el-dialog>
        <!-- 强制完成弹窗 -->
        <el-dialog title="订单强制完成" :visible.sync="handleFinished2Visible" size="mini" :lock-scroll="false">
            <h2>提示：</h2>
            <p>{{forceMarkContent}}</p>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="forceCompletion()">确定</el-button>
                <el-button size="mini" @click="handleFinished2Visible=false">取消</el-button>
            </div>
        </el-dialog>
        <!-- 采购总数量、已送货数量、已收货数量、已入库数量、采购不良      执行明细弹窗 -->
        <el-dialog title="执行明细" :visible.sync="executiveDetailsVisible" size="large" :lock-scroll="false">
            <el-table :data="executiveDetailsData" border style="width: 100%">
                <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
                <el-table-column property="materialLine" label="产线" header-align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column property="subclass" label="分类" header-align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column property="materialCode" label="备件编号" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column property="materialName" label="备件名称" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column property="standard" label="规格" header-align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column property="unit" label="计量单位" header-align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column property="amount" label="数量" header-align="center"></el-table-column>
                <el-table-column property="sendCount" label="已发货数量" header-align="center">
                    <template scope="scope">
                        <el-button size="mini" @click="rAndDDetails(scope.$index, scope.row)"  class="blueFont">
                            {{scope.row.sendCount}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column property="notSendCount" label="未发货数量" header-align="center"> </el-table-column>
                <el-table-column property="receivedCount" label="已收货数量" header-align="center">
                     <template scope="scope">
                        <el-button size="mini" @click="rAndDDetails(scope.$index, scope.row)"  class="blueFont">
                            {{scope.row.receivedCount}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column property="notReceivedCount" label="未收货数量" header-align="center"></el-table-column>
                <el-table-column property="storageCount" label="已入库数量" header-align="center">
                     <template scope="scope">
                        <el-button size="mini" @click="warehousingDetails(scope.$index, scope.row)"  class="blueFont">
                            {{scope.row.storageCount}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column property="notStorageCount" label="未入库数量" header-align="center"></el-table-column>
                <el-table-column property="unqualifiedCount" label="采购不良" header-align="center">
                    <template scope="scope">
                        <el-button size="mini" @click="warehousingDetails(scope.$index, scope.row)"  class="blueFont">
                            {{scope.row.unqualifiedCount}}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 收发货明细 -->
        <el-dialog title="收发货明细" :visible.sync="rAndDDetailsVisible" size="small" :lock-scroll="false">
            <el-table :data="rAndDDetailsData" border style="width: 100%">
                <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
                <el-table-column property="shipNoticeNo" label="发货单号" header-align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column property="currQuantity" label="发货数量" header-align="center" width="100"> </el-table-column>
                <el-table-column property="createTime" label="发货时间" header-align="center" width="100" show-overflow-tooltip></el-table-column>
                <el-table-column property="shortName" label="收货库房" header-align="center" show-overflow-tooltip></el-table-column>
            </el-table>
        </el-dialog>
        <!-- 入库明细 -->
         <el-dialog title="入库明细" :visible.sync="warehousingDetailsVisible" size="small" :lock-scroll="false">
            <el-table :data="warehousingDetailsData" border style="width: 100%">
                <el-table-column property="id" label="序" header-align="center" align="center"   width="40"></el-table-column>
                <el-table-column property="source" label="入库单号" header-align="center" show-overflow-tooltip> </el-table-column>
                <el-table-column property="source" label="入库数量" header-align="center"> </el-table-column>
                <el-table-column property="materialCode" label="入库时间" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column property="materialName" label="入库库房" header-align="center" show-overflow-tooltip></el-table-column>
                <el-table-column property="materialName" label="入库库区" header-align="center" show-overflow-tooltip></el-table-column>
            </el-table>
        </el-dialog>
        <!-- 采购不良明细 -->
    </div>
</template>

<script>
       export default {
        data() {
            return {
                POForm:{
                    legalPersonCode: "",
                    prOrderCode: "",
                    createTimeStart: "",
                    createTimeEnd: "",
                    poStatusQueryName:null, //PO状态
                    poStatusQueryResultName:null, //集成状态
                    procurementCategoryCode: "",
                    expectTimeStart: "",
                    expectTimeEnd: "",
                    emergentDegree: "",
                    partnerCode: "",
                    partnerName: ""
                },
                poStatusQueryNames: [],  //PO状态下拉列表
                poStatusQueryResultNames:[],  //集成状态下拉列表
                loading:false,
                // PO列表表格
                POListsData: [],
                // 分页
                pageIndex:1,    //当前页（必传）
                pageSize :10,   //每页多少条
                totalNumber: 20,
                totalPage:2,
                isPaging:false,
                handleFinishedVisible:false,    // 完成弹窗
                handleFinished2Visible:false,   // 强制完成弹窗
                forceMarkContent:"",   // 强制完成的提示信息
                prOrderCode:"",   //要完成的订单号
                executiveDetailsVisible:false,   //采购总数量、已送货数量、已收货数量、已入库数量、采购不良      执行明细弹窗
                executiveDetailsData:[],   //采购总数量、已送货数量、已收货数量、已入库数量、采购不良      执行明细数据
                rAndDDetailsVisible:false,    //收发货明细 弹窗
                rAndDDetailsData:[],    //收发货明细的数据
                warehousingDetailsVisible:false,   //入库明细、采购不良弹窗   
                warehousingDetailsData:[],    // 入库明细、采购不良的数据

                selIndex:"",//点击查看明细的下标
                //权限
                powerFlag:false,
                //查询禁用
                selectDisabled:false
            };
        },
        computed:{
           powerData(){
               return this.$store.state.powerData;
           }
       },
       watch:{
           powerData(){
               var _this=this;
               for(var i=0;i<_this.powerData.length;i++){
                   if(_this.powerData[i]=="ROLE_security_poTracking_done"){
                       //po跟踪确认权限
                       _this.powerFlag=true;
                   }
               }
           }
       },
       mounted: function () {
           var _this = this;
            _this.$store.commit('currentActive', 'POTracking');
        //    //ajax前后查询按钮禁用
        //    $(".selectAll").ajaxStart(function(){
        //        _this.selectDisabled=true;
        //    });
        //    $(".selectAll").ajaxStop(function(){
        //        _this.selectDisabled=false;
        //    });
           _this.POStatusValueLists(); // PO状态、集成状态下拉列表
           _this.queryPO();
           //判断权限
           for(var i=0;i<_this.powerData.length;i++){
               if(_this.powerData[i]=="ROLE_security_poTracking_done"){
                   //po跟踪确认权限
                   _this.powerFlag=true;
               }
           }
       },
        methods: {
            // PO状态、集成状态下拉列表
            POStatusValueLists(){
                var _this=this;
                $.ajax({
                    type: 'POST',
                    url: _this.procurement_service+"procurementOrder/getProcurementStatusQueryList",
                    cache: false,
                    // data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.POForm.poStatusQueryName=data.data.poStatusQueryName;  //PO状态
                            _this.poStatusQueryNames=data.data.poStatusQueryNames; //PO状态下拉列表
                            _this.POForm.poStatusQueryResultName=data.data.poStatusQueryResultName;//集成状态
                            _this.poStatusQueryResultNames=data.data.poStatusQueryResultNames; //集成状态下拉列表
                        }else
                            // console.log(data.errorMessage);
                            _this.common.errorTip(data.errorMessage);
                    }
                });
            },
            // 选择制单日期
            selectedExpectTimeStart(val){
                var _this=this;
                _this.POForm.expectTimeStart = val;
            },
            selectedExpectTimeEnd(val){
                var _this=this;
                _this.POForm.expectTimeEnd = val;
            },
            // 查询PO
            queryPO(){
                var _this=this;
                _this.loading=true;
                if(_this.POForm.poStatusQueryName == ""){
                    _this.POForm.poStatusQueryName = null;
                }
                if(_this.POForm.poStatusQueryResultName == ""){
                    _this.POForm.poStatusQueryResultName = null;
                }
                var tmp={legalPersonCode: _this.POForm.code, prOrderCode:_this.POForm.prOrderCode,createTimeStart: _this.POForm.createTimeStart, createTimeEnd: _this.POForm.createTimeEnd,poStatusQueryName: _this.POForm.poStatusQueryName,poStatusQueryResultName:_this.POForm.poStatusQueryResultName,procurementCategoryCode: _this.POForm.procurementCategoryCode,expectTimeStart: _this.POForm.expectTimeStart,expectTimeEnd: _this.POForm.expectTimeEnd,emergentDegree: _this.POForm.emergentDegree,partnerCode: _this.POForm.partnerCode,partnerName: _this.POForm.partnerName,pageIndex: _this.pageIndex, pageSize: _this.pageSize};
                _this.selectDisabled=true;
                $.ajax({
                    type: 'POST',
                    url: _this.procurement_service+"procurementOrder/orderTrack",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.loading=false;
                            var arr=data.data.dataList;
                            //金额保留两位
                            for(var i=0;i<arr.length;i++){
                                arr[i].totalMoney=arr[i].totalMoney.toFixed(2);
                            }
                            _this.POListsData=arr;
                            _this.isPaging=true;
                            _this.totalPage=data.data.totalPage;
                            _this.totalNumber=data.data.totalNumber;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                        _this.selectDisabled=false;    
                    }
                });
            },
            //   分页
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                var _this=this;
                _this.pageSize=val;
                _this.queryPO();

            },
            //点击页码分页查询点击事件
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                var _this=this;
                _this.pageIndex=val;
                _this.queryPO();
            },
            //点击完成 
            handleFinished(index,row){
                var _this=this;
                _this.handleFinishedVisible=true;
                _this.prOrderCode=row.prOrderCode;
            },
            // 点击完后 弹窗中的确认
            confirmCompletion(){
                var _this=this;
                $.ajax({
                    type: 'POST',
                    url: _this.procurement_service+"procurementOrder/manualDone?prOrderCode="+ _this.prOrderCode,
                    cache: false,
                    // data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        _this.handleFinishedVisible=false;
                        if (data.success) {
                            if(data.data && data.data.resultContent){
                                _this.handleFinished2Visible=true;
                                _this.forceMarkContent = data.data.resultContent;
                            }else{
                                _this.common.successTip("操作成功！");
                            }
                        }else
                            _this.common.errorTip(data.errorMessage);
                    }
                });
            },
            // 强制完成弹窗中的确定
            forceCompletion(){
                var _this=this;
                $.ajax({
                    type: 'POST',
                    url: _this.procurement_service+"procurementOrder/manualForceDone?prOrderCode="+ _this.prOrderCode,
                    cache: false,
                    // data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.common.successTip("操作成功！");
                            _this.handleFinished2Visible=false;
                        }else
                            // console.log(data.errorMessage);
                            _this.common.errorTip(data.errorMessage);
                    }
                });
            },
            // 采购总数量、已送货数量、已收货数量、已入库数量、采购不良      执行明细
            executiveDetails(index,row){
                var _this=this;
                _this.selIndex=row.prOrderCode;
                _this.executiveDetailsVisible=true;
                $.ajax({
                    type: 'POST',
                    url: _this.procurement_service+"procurementOrder/orderItemExecutingTrack?prOrderCode="+ row.prOrderCode,
                    cache: false,
                    // data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.executiveDetailsData=data.data;
                        }else
                            _this.common.errorTip(data.errorMessage);
                    }
                });
            },
            // 收发货明细
            rAndDDetails(index,row){
                var _this=this;
                _this.rAndDDetailsVisible=true;
                // var tmp={
                //     poCode:_this.selIndex,
                //     materialCode:row.materialCode
                // }
                $.ajax({
                    type: 'GET',
                    url: _this.procurement_service+"shipNotice/findSysncNoticeList?poCode="+_this.selIndex+"&materialCode="+row.materialCode,//procurementOrder/findSendGoods
                    cache: false,
                    // data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        if (data.success) {
                            _this.rAndDDetailsData=data.data;
                        }else
                            _this.common.errorTip(data.errorMessage);
                    }
                });
            },
            // 入库明细
            warehousingDetails(){
                var _this=this;
                _this.warehousingDetailsVisible=true;
            },
            // // ===================================
            // successTip(p) {     //成功时的提示信息
            //     this.$notify({
            //         title: '成功',
            //         message: p,
            //         type: 'success'
            //     });
            // },
            // errorTip(p) {     //错误提示
            //     this.$notify.error({
            //         title: '错误',
            //         message: p
            //     });
            // }

        }
            
    }
</script>